<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
      定位= 定位模式 + 偏移值
        position: static(静态定位，默认)
                  relative（相对定位)
                  absolute(绝对定位)
                  fixed(固定定位)

        偏移值:  top,距离顶部的位置
                right,距离右侧的位置
                bottom,距离底部的位置
                left,距离左侧的位置

   -->
  <style>
    /* 
        positon:relative; 相对定位
              特性: 
                    1.占据文档流
                    2.相对于自身的位置定位
                    3.跟随页面滚动
                    4.为其它定位(绝对定位)提供参照点的
                    5.相对定位后，实际占据的位置没有改变，只是视觉上发生了改变
    */
    .box1{
      position: relative;
      left: 50px;
      top: 50px;
      width: 300px;
      height: 300px;
      background-color: orange;
    }
    /* 
      绝对定位
      position:absolute;
            特性:
              1.不占据文档流
              2.相对于最近设置过定位(relative、absolute、fixed)的祖先元素,
                如果找不到，则会相对于html根元素
              3.跟随页面滚动
              4.设置过绝对定位后，元素的display会自动变为block，
              宽度并不会占据一行，需要手动设置
    */
    .box2{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
      position: absolute;
      left: 20px;
      bottom: 0;
    }
    /* 
      position:fixed; 固定定位
            特性：
                1.脱离文档流
                2.固定定位始终是相对于浏览器的视口
                3.不会跟随页面滚动
                4.设置固定定位后，元素的display会自动变为block
                  宽度并不会占据一行，需要手动设置
    */
     .fixed{
       position: fixed;
       right: 5px;
       top: 100px;
       width: 30px;
       height: 200px;
       background-color: #ccc;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
     }
  </style>
  <span class="fixed"></span>

  <div class="box1">
    <span class="box2"></span>
    <div style="width: 100px;height: 100px;background-color: red;"></div>
  </div>
  <div style="height: 2000px; background-color: pink;"></div>
</body>
</html>